<template>
	<view class="searchs">
		<div>
			<navitop>
				<i class="iconfont" slot="left-slot" @click="outlot">&#xe667;</i>
				<span slot="center-slot">编辑搜索条件</span>
			</navitop>
		</div>
		<div class="public_margin_top"></div>
		<div class="search">
			<div class="second_serch" >
				<!-- <text style="width: 15%;text-align: center;" :class="['second_serch_class',sarch_class]" 
					@click="search_class_all(item)">
					<i class="iconfont icon-nb-"></i><br>
					所有
				</text> -->
				<text :class="['second_serch_class', sarch_class_id == item.id ? sarch_class_pos :'']"
					v-for="(item,index) in serchar_list" @click="search_class(item)">
					<i class="iconfont icon-nb-"></i><br>
					{{item.searchName}}
				</text>
			</div>
			<br>
			<div class="search_list" v-for="(item,index) in rundataSorce">
				<div class="search_class" v-if="item.type == '文本'">
					<div class="search_div_one">
						<text>{{item.name}}</text>
					</div>
					<div class="search_div_tow">
						<input v-model="item.value" />
					</div>
				</div>
				<div class="search_class" v-if="item.type == '搜索选择' ">
					<div class="search_div_one">
						<text>{{item.name}}</text>
					</div>
					<div class="search_div_tow">
						<!-- <input v-model="item.value" @click="alertcity(item.code)" disabled='true' /> -->
					</div>
				</div>
				<div class="search_class" v-if="item.type == '下拉' ">
					<div class="search_div_one"> 
						<text>{{item.name}}</text>
					</div>
					<div class="search_div_tow">
						<!-- <input v-model="item.value" @click="alertcity_dow(item.code)" disabled='true' /> -->
					</div>
				</div>
				<div class="search_class_time" v-if="item.type == '日期' || item.type == '时间'">
					<div class="search_class_time_one">
						<div class="search_div_one">
							<text>{{item.name}}</text>
						</div>
						<div class="search_div_tow" @click="valuecode(item.code)">
							<input v-if="item.rangDateVal" v-model="item.rangDateVal[0]" style="margin: 20rpx 0 0 0;" @click="setTime_alert(item.code)"
								disabled='true' />
							<input v-else="item.rangDateVal" v-model="item.value" style="margin: 20rpx 0 0 0;" @click="setTime_alert(item.code)"
								disabled='true' />
						</div>
					</div>
					<div class="search_class_time_tow" v-show="item.timezj" @click="timecode(item.code)">
						<div>
							<text>开始时间：</text>
							<kxTime :date="item.bigenTime" :end='enddate' :start='startdate' @rundata='bigentime'
								default='start' placeholder="选择时间"></kxTime>
						</div>
						<div>
							<text>结束时间：</text>
							<kxTime :date="item.lastTime" :end='enddate' :start='startdate' @rundata='lasttime'
								default='start' placeholder="选择时间"></kxTime>
						</div>
					</div>

				</div>
			</div>
		</div><br><br>
		<div :style="heigsdiv"></div>
		<div class="public_button" :style="heigs">
			<div class="public_text">
				<div @click="edit_savea">
					保存
				</div>
			</div>
		</div>
		<!-- 弹窗组件 -->
		<popus ref="alert">
			<alertcenter @row="row" :dataSorc="data"></alertcenter>
		</popus>

		<!-- 方案弹窗 -->
		<popus ref="saveas_alert">
			<div class="saveas_alert_out">
				<div class="saveas_alert_input">
					<text>名称：</text><input v-model="saveas_value" />
				</div>
				<div class="saveas_alert_bottom" @click="saveasType">
					<text>保存</text>
				</div>
			</div>
		</popus>
		
		 <!-- 搜索模块编辑 -->
		<popus ref="search_edit">
			<div :style="alertWidth" >
				<searchedit :crmType="crmTypes" :id="uid" :name="names"></searchedit>
			</div>
		</popus>
		<!-- 气泡弹窗 -->
		<chunLeiPopups v-model="value" :popData="data" @tapPopup="tapPopup" :x="345" :y="95" placement="top-end"></chunLeiPopups>
		
		<!-- 地址组件 -->
		<ztree ref='ztree' @cityalerts="cityalerts" :dataSorce="citys_c"></ztree>

	</view>
</template>
<script>
	import navitop from '@/components/common/navi-top'
	import kxTime from "@/components/kx-datetime/kx-datetime"
	import alertcenter from '@/pages/common/common/alert/alertcenter'
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue"
	import searchedit from '@/pages/common/common/serarch/serarch_inside/searchedit'
	import ztree from '@/pages/common/common/city/z_citys.vue'
	import {
		getToday,
		getYesterday,
		getCurrWeekDays,
		getLastWeekDays,
		getCurrMonthDays,
		getLastMonthDays,
		getCurrQuarter,
		getLastQuarter,
	} from '@/common/api/job/alert.js'
	import {Z_threes} from '@/common/api/common/public_api.js'
	import {
		namelist,
		pages,
		city,
		list,
		dataList,
		Searchsave,
		Searchdetail,
		Searchdelete
	} from '@/common/api/job/jobapi.js'
	export default {
		components: {
			kxTime,
			alertcenter,
			popus,
			ztree,
			navitop,
			chunLeiPopups,
			searchedit
		},
		data() {
			return {
				rundataSorce: [],
				crmGrades: [],
				industrys: [],
				crmTouchs: [],
				citys_c: [],
				date: '', //需要展示的时间数据
				enddate: "2200", // 时间段的终止时间，不设置默认当前之间终止
				startdate: "2021", //时间段的开始时间，不设置默认计算机最初时间
				data: '',
				NextTime: '', //下次联系时间
				lastTime: '', //最后联系时间
				releaseTime: '', // 释放时间
				claimTime: '', //领用时间
				city_region: '', // 地区

				crmGrad: '',
				industr: '',
				crmTouc: '',

				// 键盘定位
				heigs: '',
				heigsdiv: 0,

				// 获取分类参数
				crmTypes: '',
				names: '',
				uid: '',
				url: '',
				// 获取部门
				dataLi: [],
				// 获取公共联系人
				public_name: [],

				run_name: '',

				// 时间字段
				timeList: [{
						name: '全部'
					},
					{
						name: '今日'
					},
					{
						name: '昨日'
					},
					{
						name: '本周'
					},
					{
						name: '上周'
					},
					{
						name: '本月'
					},
					{
						name: '上月'
					},
					{
						name: '本季度'
					},
					{
						name: '上季度'
					},
					{
						name: '自定义'
					}
				],
				data:[{
						title: "编辑",
						messing: 'detialedit',
						code: 2,
						icon: 'icon-bianji'
					},{
						title: "删除",
						messing: 'del',
						code: 3,
						icon: 'icon-shanchu'
					}],
					
				value: false,	
				time_code: '',

				bigenTime: '', //自定义开始时间
				lastTime: '', //自定义结束时间

				saveas_value: '', // 另存搜索方案
				serchar_list: '', // 获取方案列表
				sarch_class: '', // 切换颜色
				sarch_class_pos: '',
				sarch_class_id: '',
				edit_uname: '', // 修改回显
				class_name: '',	// 分类
				class_crmTypes: '', // 用户分类
				class_type: '',		// 联系人
				alertWidth: '',		// 搜索模块编辑	
			}
		},
		onLoad(option) {
			// 获取分类参数
				this.crmTypes = option.crmType,
				this.names = option.name,
				this.uid = option.id,
				this.url = '?id=' + this.uid + '&crmType=' + this.crmTypes + '&name=' + this.names;
			
			
			if(option.crmType == 0 || option.crmType == 1 || option.crmType == 2){
				this.class_name = "crm";
				this.class_crmTypes = option.crmType;
				this.class_type = '';
			}
			if(option.crmType == 3 ){
				this.class_name = 'linkMan';
				this.class_crmTypes = 1;
				this.class_type = 'linkMan'
				
			}
			if(option.crmType == 4 ){
				this.class_name = 'touch';
				this.class_type = '';
				
			}
			if(option.crmType == 5 ){
				this.class_name = 'business';
				this.class_crmTypes = ''
				this.class_type = '';
			}
			
			uni.onKeyboardHeightChange(res => {
				res.height = res.height + 50;
				this.heigsdiv = 'height:' + res.height + 'px;';
				this.heigs = 'height:' + res.height + 'px;';
			})

		
			this.user_suad();
			this.citys();
			this.dataLis();
		},
		mounted() {
			// 获取窗口宽度
			let _this = this;
			uni.getSystemInfo({ 
			    success: function (res) {
					_this.alertWidth = 'width:' + res.windowWidth + 'px;'
			    }
			});
			
			
			this.searchlist();
			this.sarch_class = 'seaoind_click'
		},
		methods: {
			
			alertcity_dow(val){
				console.log(99999)
			},

			// 气泡弹窗
			tapPopup(val){
				this.value = true;
				if(val.code == 2){
					this.$refs.search_edit.open('left')
				}
				if(val.code == 3){
					
				}
			},

			// 保存列表编辑框
			saveas() {
				
				this.$refs.saveas_alert.open('center')
			},
			// 选中颜色
			search_class(val) {
				this.edit_uname = val.searchName;
				this.sarch_class_id = val.id
				this.sarch_class = '';
				this.sarch_class_pos = 'seaoind_click';
				list({source: this.class_name}).then((result) => {
					if (result.code == 200) {
						console.log(result)
						result.data.forEach(item => {
							if (item.type == '时间' || item.type == '日期') {
								this.$set(item, 'rangDateVal', JSON.parse(val.searchVal)[item.code])
							} else {
								this.$set(item, 'value', JSON.parse(val.searchVal)[item.code])
							}
						})
						this.rundataSorce = result.data;
						
					}
				})
			},
			// 选中颜色所有
			search_class_all(val) {
				list({
					source: this.class_name
				}).then((result) => {
					if (result.code == 200) {
						result.data.forEach(item => {
							this.$set(item, 'value', '')
						})
						this.rundataSorce = result.data
					}
				})
				this.sarch_class = 'seaoind_click';
				this.sarch_class_pos = '';
			},

			// 修改方案
			edit_savea() {
				this.saveas_value = this.edit_uname;
				this.$refs.saveas_alert.open('center')
				console.log(this.rundataSorce)
			},

			// 保存方案
			saveasType() {
				uni.showLoading({
					title: '保存中'
				})
				let opax = {};
				let edit_id = {};
				this.rundataSorce.forEach(item => {
					if (item.value) {
						if (item.type == '时间' || item.type == '日期') {
							opax[[item.code]] = item.rangDateVal
						} else {
							opax[[item.code]] = item.value
						}
					}
				})
				if (this.sarch_class_id) {
					edit_id = {
						id: this.sarch_class_id,
						searchName: this.saveas_value,
						searchType: Number(this.crmTypes),
						searchVal: JSON.stringify(opax)
					};
				} else {
					edit_id = {
						searchName: this.saveas_value,
						searchType: Number(this.crmTypes),
						searchVal: JSON.stringify(opax)
					};
				}

				Searchsave(edit_id).then((rows) => {
					if (rows.code == 200) {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功'
						})
						setTimeout(() => {
							location.reload();
						}, 1500)
					}
				})
			},

			//删除联系
			delet() {
				let _this = this;
				if (this.sarch_class_id == '') {
					uni.showToast({
						title: '请选择需要删除的数据',
						iron: 'error'
					})
					return false;
				}
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function(res) {
						uni.showLoading({
							title: '删除中'
						});
						if (res.confirm) {
							Searchdelete({
								id: _this.sarch_class_id
							}).then((rows) => {
								if (rows.code == 200) {
									uni.hideLoading();
									uni.showToast({
										title: '删除成功'
									})
									setTimeout(() => {
										location.reload();
									}, 1500)
								}
							})
						} else if (res.cancel) {
							uni.hideLoading();
							console.log('用户取消')
						}
					}
				})

			},

			// 获取搜索方案列表
			searchlist() {
				Searchdetail({
					searchType: Number(this.crmTypes)
				}).then((rows) => {
					if (rows.code = 200) {
						this.serchar_list = rows.data;
					}
				})
			},


			// 返回
			outlot(){
				uni.navigateTo({
					url: "/pages/common/common/serarch/search" + this.url
				})
			},

			bigentime(a) {
				this.bigenTime = a;
				let time_arr = [];
				let vals = {
					code: this.time_code
				}
				this.rundataSorce.forEach(item => {
					if (item.code == this.time_code) {
						this.$set(item, 'bigenTime', a)
					}
				})
				time_arr = ['自定义', [a, '']]

				this.arr_time(vals, time_arr)
			},
			lasttime(a) {
				let time_arr = [];
				this.lastTime = a;
				let vals = {
					code: this.time_code
				}
				this.rundataSorce.forEach(item => {
					if (item.code == this.time_code) {
						this.$set(item, 'lastTime', a)
					}
				})
				time_arr = ['自定义', [this.bigenTime, a]]
				this.arr_time(vals, time_arr)
			},
			timecode(val) {
				this.time_code = val;
			},

			// 获取字段code
			valuecode(val) {
				this.run_name = val;
			},

			alertcity(val) {
				if (val == 'areaId') { // 地区
					this.$refs.ztree.z_three();
				} else if (val == 'crmGrade') { //等级
					this.data = this.crmGrades;
					this.$refs.alert.open('bottom');
				} else if (val == 'industry') { //
					this.data = this.industrys;
					this.$refs.alert.open('bottom');
				} else if (val == 'officeId') { // 部门
					this.dataLi.forEach(item => {
						this.$set(item, 'code', val)
					})
					this.data = this.dataLi;
					this.$refs.alert.open('bottom');

				} else {
					this.public_name.forEach(item => {
						this.$set(item, 'code', val)
					})
					this.data = this.public_name;
					this.$refs.alert.open('bottom');
				}

			},

			// 获取选中城市
			cityalerts(val) {
				console.log(val)
				this.rundataSorce.forEach(item => {
					if (item.code == 'areaId') {
						this.$set(item, 'value', val)
					}
				})
			},

			// 获取城市数据
			citys() {
				let children = [];
				city({
					current: 1,
					size: -1
				}).then((result) => {
					this.citys_c = Z_threes(result.data, [])
				})
			},

			// 获取弹窗数据
			row(val) {
				let time_arr = [];
				if (val.name == '全部') {
					time_arr = ['', ['', '']]
					this.arr_time(val, time_arr)
				} else if (val.name == '今日') {
					this.rundataSorce.forEach(item => {
						if (item.code == val.code) {
							this.$set(item, 'timezj', false)
						}
					})
					time_arr = [val.name, [getToday().starttime, getToday().endtime]]
					this.arr_time(val, time_arr)
				} else if (val.name == '昨日') {
					this.rundataSorce.forEach(item => {
						if (item.code == val.code) {
							this.$set(item, 'timezj', false)
						}
					})
					time_arr = [val.name, [getYesterday().starttime, getYesterday().endtime]]
					this.arr_time(val, time_arr)
				} else if (val.name == '本周') {
					this.rundataSorce.forEach(item => {
						if (item.code == val.code) {
							this.$set(item, 'timezj', false)
						}
					})
					time_arr = [val.name, [getCurrWeekDays().starttime, getCurrWeekDays().endtime]]
					this.arr_time(val, time_arr)
				} else if (val.name == '上周') {
					this.rundataSorce.forEach(item => {
						if (item.code == val.code) {
							this.$set(item, 'timezj', false)
						}
					})
					time_arr = [val.name, [getLastWeekDays().starttime, getLastWeekDays().endtime]]
					this.arr_time(val, time_arr)
				} else if (val.name == '本月') {
					this.rundataSorce.forEach(item => {
						if (item.code == val.code) {
							this.$set(item, 'timezj', false)
						}
					})
					time_arr = [val.name, [getCurrMonthDays().starttime, getCurrMonthDays().endtime]]
					this.arr_time(val, time_arr)
				} else if (val.name == '上月') {
					this.rundataSorce.forEach(item => {
						if (item.code == val.code) {
							this.$set(item, 'timezj', false)
						}
					})
					time_arr = [val.name, [getLastMonthDays().starttime, getLastMonthDays().endtime]]
					this.arr_time(val, time_arr)
				} else if (val.name == '本季度') {
					this.rundataSorce.forEach(item => {
						if (item.code == val.code) {
							this.$set(item, 'timezj', false)
						}
					})
					time_arr = [val.name, [getCurrQuarter().starttime, getCurrQuarter().endtime]]
					this.arr_time(val, time_arr)
				} else if (val.name == '上季度') {
					this.rundataSorce.forEach(item => {
						if (item.code == val.code) {
							this.$set(item, 'timezj', false)
						}
					})
					time_arr = [val.name, [getLastQuarter().starttime, getLastQuarter().endtime]]
					this.arr_time(val, time_arr)
				} else if (val.name == '自定义') {
					this.rundataSorce.forEach(item => {
						if (item.code == val.code) {
							this.$set(item, 'timezj', true)
						}
					})
				} else {
					this.rundataSorce.forEach(item => {
						if (item.code == val.code) {
							this.$set(item, 'value', val.name)
						}
					})
				}

				this.$refs.alert.close();
			},
			// 时间数组
			arr_time(val, value) {
				console.log(val)
				console.log(value)
				this.rundataSorce.forEach(item => {
					if (item.code == val.code) {
						this.$set(item, 'rangDateVal', value);
						this.$set(item, 'value', val.name);
					}
				})
			},



			city_tree() {
				this.$refs.ztree.z_three();
			},

			// 获取部门
			dataLis() {
				dataList({
					isLoadUser: 2
				}).then((rows) => {
					if (rows.code == 200) {
						this.public_name = rows.data;
						for (let i in rows.data) {
							if (rows.data[i].parentId !== '0' && rows.data[i].id.split("_")[1] !== 'user') {
								this.dataLi.push(rows.data[i]);
							}
						}
					}
				})
			},

			// 客户等级，跟进阶段，所属行业
			user_suad() {
				list({
					source: this.class_name
				}).then((row) => {
					if (row.code == 200) {
						for (let i in row.data) {
							row.data[i]['value'] = '';
							row.data[i]['timezj'] = false;
							row.data[i]['bigenTime'] = '';
							row.data[i]['lastTime'] = '';
							if (row.data[i].code == 'crmGrade') {
								for (let j in row.data[i].val.split(",")) {
									this.crmGrades.push({
										name: row.data[i].val.split(",")[j],
										code: 'crmGrade'
									});
								}
							}
							if (row.data[i].code == 'industry') {
								for (let j in row.data[i].val.split(",")) {
									this.industrys.push({
										name: row.data[i].val.split(",")[j],
										code: 'industry'
									});
								}
							}
						}
						this.rundataSorce = row.data;
					}
				})
				namelist({
					source: 'touch'
				}).then((row) => {
					if (row.code == 200) {
						for (let i in row.data) {
							if (row.data[i].code == "crmTouch") {
								for (let j in row.data[i].val.split(",")) {
									this.crmTouchs.push({
										name: row.data[i].val.split(",")[j],
										code: 'crmTouch'
									});
								}
							}
						}
					}
				})
			},

			// 搜索时间处理
			setTime_alert(val) {
				this.timeList.forEach(item => {
					this.$set(item, 'code', val)
				})
				this.data = this.timeList;
				this.$refs.alert.open('bottom');
			},

			// 搜索
			okclick() {
				for (let i in this.rundataSorce) {
					delete this.rundataSorce[i].timezj;
					delete this.rundataSorce[i].bigenTime;
					delete this.rundataSorce[i].lastTime;
					if (this.rundataSorce[i].type == '时间' || this.rundataSorce[i].type == '日期') {
						delete this.rundataSorce[i].value;
					}
				}

				if (this.rundataSorce !== '') {
					pages({
						'crmType': this.crmTypes,
						'customerIds': '',
						'dtos': this.rundataSorce,
						'isCollected': false
					}).then((val) => {
						this.dataSorce = val.data.records;
						for (let i in this.dataSorce) {
							if (this.dataSorce[i].defineFields !== undefined) {
								this.dataSorce[i].defineFields = JSON.parse(this.dataSorce[i].defineFields)
							}
						}

						uni.setStorage({
							key: 'search',
							data: this.dataSorce,
							success: function(res) {
								console.log(res)
							}
						});
						uni.navigateTo({
							url: '/pages/common/index/second' + this.url
						});
					})
				}
			}

		}
	}
</script>
<style scoped lang="scss">
	.searchs {
		height: 100%;
		width: 100%;

		.search {
			width: 95%;
			margin: auto;

			.search_one {
				display: flex;
				background-color: #fff;
				border-radius: 4px;
				height: 75rpx;
				margin-top: 10px;

				.searchs_input {
					display: flex;
					width: 87%;

					.iconton {
						font-size: 25px;
						padding: 5px 10px 5px 10px;
					}

					input {
						margin: 1%;
						width: 80%;
					}
				}

				.searche_text {
					line-height: 75rpx;
					color: #667497;
				}
			}

			.search_three {
				padding: 10rpx 0 0 10rpx;
				background-color: #fff;
			}

			.search_list {
				.search_class {
					display: flex;
					width: 100%;
					padding-top: 10rpx;
					background-color: #fff;

					div {
						height: 90rpx;
						line-height: 90rpx;

						text {
							padding: 0 20rpx 0 30rpx;
						}

						input {
							width: 90%;
							margin: 20rpx 0 0 0;
							border: 1px solid #ccc;
						}

						input:hover {
							border: 1px solid #1890ff;
						}
					}

					.search_div_one {
						// width: 35%;
						text-align: center;
					}

					.search_div_tow {
						width: 65%
					}
				}

				.search_class_time {
					width: 100%;
					padding: 10rpx 0 20rpx 0;
					background-color: #fff;
					

					.search_class_time_one {
						display: flex;
						width: 95%;
						margin: auto;
					}

					.search_class_time_tow {
						display: flex;
						width: 95%;
						margin: auto;
						justify-content: space-around;
					}

					.search_div_one {
						// width: 35%;
						text-align: center;

						text {
							padding: 0 20rpx 0 20rpx;
							line-height: 90rpx;
							height: 90rpx;
						}

					}

					.search_div_tow {
						width: 65%;

						input {
							width: 90%;
							padding-left: 20rpx;
							border: 1px solid #ccc;
						}
					}
				}
			}
		}

		// 头部方案列表
		.second_serch {
			background-color: #fff;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 0 0 30rpx 0;

			text {
				height: 77px;
				width: 50px;
				margin: 20rpx 0 0 30rpx;
				padding: 0 20rpx 0 20rpx;
				border-radius: 4px;
				text-align: center;
				overflow: hidden;
			}

			i {
				font-size: 25px;
				text-align: center;
			}
		}

		//方案操作
		.public_button {
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 4px;
			background-color: #1890FF;
			color: #fff;
		}

		.public_text {
			display: flex;
			justify-content: space-around;
		}

		.public_text div:hover {
			background-color: orange;
			padding: 0 30rpx 0 30rpx;
		}

		.seaoind_click {
			background-color: #1890FF;
			color: #fff;
		}

		.second_serch_text {
			border: 1px solid #cacaca;
		}



		.saveas_alert_out {
			height: 180px;
			width: 250px;
			background-color: #fff;
			border-radius: 8px;

			.saveas_alert_input {
				display: flex;
				height: 90rpx;
				width: 95%;
				margin: auto;
				line-height: 90rpx;
				padding: 10% 0 30rpx 0;

				input {
					border: 1px solid #cacaca;
				}
			}

			.saveas_alert_bottom {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				width: 95%;
				margin: auto;
				// margin: 30rpx 0 0 0;
				color: #fff;
				background-color: #1890FF;
			}
		}




	}
</style>
